<template>
  <div>
    <!-- 项目列表 -->
    <div class="tabNav">
      <router-link to="/index">
        <img :src="require('/src/assets/img/sidebar1.png')" />首页
      </router-link>
      <b>/<img src="../assets/img/settlement.png" />税源地设置</b>
    </div>
    <!-- <div class="app-container">
      <el-cascader ref="cascaderAddr" v-model="cityValue" :options="options2" @change="handleChange" />
    </div> -->
    <el-card class="cardTits" shadow="hover">
      <div class="search">
        <el-input v-model="searchVal" placeholder="税源地名称"></el-input>
        <el-button type="primary" @click="getTaskList()">查询</el-button>
        <el-button
            type="primary"
            @click="addTaskModule = true"
            class="query-btn task-add"
            icon="el-icon-plus"
            >新建</el-button
          >
      </div>
          
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        ref="multipleTable"
        :row-key="getRowKeys"
        @sort-change="sortChange"
      >
        <el-table-column prop="id" label="ID" width="120"> </el-table-column>
        <el-table-column prop="authBusinessName" sortable="custom" label="税源地名称">
        </el-table-column>
        <el-table-column prop="authBankName" sortable="custom" label="税源地开户行" width="">
        </el-table-column>
        <!-- <el-table-column prop="authBankName" sortable="custom" label="税源地开户地" width="">
        </el-table-column> -->
        <el-table-column prop="authBankNo" sortable="custom" label="税源地银行账号" width=""></el-table-column>
        <el-table-column prop="linkFlg" label="是否联动">
          <template #default="item">
            <template v-if="item.row.linkFlg == 0">否</template>
            <template v-else>是</template>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" sortable="custom" label="创建时间">
          <template #default="item">
            {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.createTime)) }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          class-name="editor"
          width="180"
        >
          <template #default="item">
            <el-button @click="deleteTask(item.row)" type="text">上传协议</el-button>
            <el-button v-if="item.row.agreementUrl" @click="openUrl(item.row.agreementUrl)" type="text">查看</el-button>
            <el-button @click="getTaskDetails(item.row.id)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="tableData.length > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="arrPage"
        :page-size="selectPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    
    <el-dialog title="税源地协议模版" custom-class="task-margin task-margins" v-model="addTaskModules1" @close="taskClose" width="600px">
      <el-form
        :model="taskForms"
        ref="taskForms"
        label-width="100px"
        class="demo-ruleForm demo-ruleForms"
      >
        <el-form-item>
          <el-upload
            list-type="picture-card"
            :auto-upload="true"
            :file-list="fileList.agreementUrl"
            accept="application/pdf"
            :http-request="(file) => uploadPhotoFile(file, 'agreementUrl')"
            ref="idagreementUrl"
          >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>

     <!-- 新建弹出层 -->
     <el-dialog title="新增税源地" custom-class="task-margin task-margins" v-model="addTaskModule" @close="taskClose" width="600px">
      <div class="add-task add-tasks">
        <el-form
          :model="taskForm"
          :rules="rules"
          v-if="addTaskModule"
          ref="taskForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="税源地开户行" prop="authBankName">
            <el-input disabled v-model="taskForm.authBankName"></el-input>
          </el-form-item>
          <el-form-item label="税源地名称" prop="authBusinessName">
            <el-input v-model="taskForm.authBusinessName"></el-input>
          </el-form-item>
          <el-form-item label="税源地银行账号" prop="authBankNo">
            <el-input v-model="taskForm.authBankNo"></el-input>
          </el-form-item>
          <el-form-item label="是否联动" prop="linkFlg">
            <el-select v-model="taskForm.linkFlg">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addTaskModule = false">取 消</el-button>
          <el-button type="primary" @click="addTaskMethods"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 编辑弹出层 -->
    <el-dialog title="编辑税源地" custom-class="task-margin task-margins" v-model="addTaskModules" @close="taskClose" width="600px">
      <div class="add-task add-tasks">
        <el-form
          :model="taskForm"
          :rules="rules"
          v-if="addTaskModules"
          ref="taskForm"
          label-width="150px"
          class="demo-ruleForm"
        >
        <el-form-item label="税源地名称" prop="authBusinessName">
            <el-input v-model="taskForm.authBusinessName"></el-input>
          </el-form-item>
          <el-form-item label="税源地银行账号" prop="authBankNo">
            <el-input v-model="taskForm.authBankNo"></el-input>
          </el-form-item>
          <el-form-item label="税源地开户行" prop="authBankName">
            <el-input v-model="taskForm.authBankName"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addTaskModules = false">取 消</el-button>
          <el-button type="primary" @click="addTaskMethods1"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {options2} from "@/utils/city";
export default {
  name: "ListTask",
  data() {
    return {
      getRowKeys(row) {
        // 获取row的key值
        return row.id;
      },
      cityValue: [],
      options2: options2,
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      mubanflag: false,
      addTaskModules1: false,
      mubanArr: [],
      mubanUrl: "",
      searchVal: "", // 查询条件
      total: 1, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
      currentPage: 1,
      isDisable: { // 项目状态
        1: '已启用',
        0: '已禁用',
      },
      options: [
        {
          value: "",
          label: "选择企业",
        },
        {
          value: "1",
          label: "已启用",
        },
        {
          value: "0",
          label: "已禁用",
        },
      ],
      options1: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 0,
          label: "否",
        },
      ],
      taskForms: {
        url: "", // url
      },
      selectValue: "",
      selectValue1: "",
      tableData: [],
      tableDatas: [],
      tableDatas1: [],
      addTaskModule: false,
      addTaskModules: false,
      taskForm: {
        authBusinessName: "", // 税源地名称
        authBankName: "招商银行", // 税源地开户行
        authBankNo: "", // 税源地银行账号
        linkFlg: undefined
      },
      rules: {
        authBusinessName: [{ required: true, message: "请输入税源地名称", trigger: "blur" }],
        authBankNo: [{ required: true, message: "请输入税源地银行账号", trigger: "blur" }],
        linkFlg: [{ required: true, message: "请选择是否联动", trigger: "change" }],
      },
      fileList: [],
      checkedLsit: [],
      detailsTaskModule: false,
      taskDetailsObj: {}
    };
  },
  components: {},
  created() {
    // console.log(this.options2)
    this.getTaskList()
  },
  methods: {

    handleChange(value) {

      console.log(value);
            // let nodeContent = this.$refs["cascaderAddr"].getCheckedNodes();
             // 这种方式
            //  if (this.value.length != 0) {
            //         let arr = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels
            //         console.log('value', this.value)
            //         console.log('arr', arr)
            //       }
 
            //这种方式
            this.$nextTick(() => {
                let casename = this.$refs["cascaderAddr"].presentText.split(
                    this.$refs["cascaderAddr"].separator
                );
                console.log("value：", casename);
            });

      // let checkLabel = this.options.find( item => item.value ==val).label
      // console.log(checkLabel);
      // const selectedOption = this.options2.value.find(opt => opt.value === value);
      // console.log(selectedOption.label); // 输出额外的参数
      // this.$nextTick(function () {
      //   this.$refs.optionRef.selected.value,
      //   this.$refs.optionRef.selected.label

      //   console.log(this.$refs.optionRef.selected.value);
      //   console.log(this.$refs.optionRef.selected.label);
      // });
    },
    handleCurrentChange(d) {
      // 分页切换回调
      this.currentPage = d
      this.getTaskList()
    },
    handleSizeChange(d) {
      // 分页切换每页条数回调
      this.selectPage = d
      this.getTaskList()
    },
    getTaskList() {
      // 分页查询平台税源地配置
      this.$http({
        url: "/api/quick/bank/selectBankParamPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          authBusinessName: this.searchVal,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code == 0) {
          this.tableData = data.result.list
          this.total = data.result.total
        }
      });
    },
    sortChange(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == "name") {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getTaskList()
    },
    updateTaskStatus(id) {
      // 禁用
      this.$confirm('是否禁用项目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'task-message',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: "/api/quick/business/task/disabledTask",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: id,
        }).then((data) => {
          if (data.code == 0) {
            this.$message({
              message: '已禁用',
              type: 'success',
              offset: 60
            })
            this.getTaskList()
          }
        });
      }).catch(() => {
      });
    },
    enableTask(id) {
      // 项目启用
      this.$confirm('是否启用项目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'task-message',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: "/api/quick/business/task/enableTask",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: id,
        }).then((data) => {
          if (data.code == 0) {
            this.$message({
              message: '已启用',
              type: 'success',
              offset: 60
            })
            this.getTaskList()
          }
        });
      }).catch(() => {
      });
    },
    openUrl(agreementUrl) {
      window.open(agreementUrl)
    },
    deleteTask(row) {
      this.taskForms.id = row.id
      this.addTaskModules1 = true
    },
    uploadPhotoFile(res) {
      this.addTaskModules1 = false
      // 文件上传公用
      let formData = new FormData();
      formData.append("file", res.file);
      const isLt6M = res.file.size / 1024 / 1024 < 6;
      if (!isLt6M) {
        this.$message.error('上传头像图片大小不能超过 6MB!');
      }else {
        this.$http({
          url: "/api/quick/oss/uploadBySingle",
          method: "post",
          headers: {
            "Content-Type": "multipart/form-data",
          },
          data: formData,
        }).then((data) => {
          if (data.code == 0) {
            this.taskForms.agreementUrl = data.result;
            this.$http({
              url: "/api/quick/bank/saveOrUpdate",
              method: "post",
              headers: {
                "Content-Type": "application/json",
              },
              data: {
                id: this.taskForms.id,
                agreementUrl: this.taskForms.agreementUrl 
              },
            }).then((data) => {
              if (data.code == 0) {
                this.getTaskList()
                this.$message({
                  message: '上传成功',
                  type: 'success',
                  offset: 60
                })
              }
            });
          }
        });
      }
    },
    deleteXlsxfile() {
      this.fileList = []
    },
    addTaskMethods() {
      // 新增
      this.$refs.taskForm.validate((valid) => {
        if (valid) {
          this.$http({
            url: "/api/quick/bank/saveOrUpdate",
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: this.taskForm
          }).then((data) => {
            // console.log(data)
            if (data.code == 0) {
              this.addTaskModule = false
              this.$message({
                message: '设置成功',
                type: 'success',
                offset: 60
              })
              this.taskForm = {
                authBusinessName: "", // 税源地名称
                authBankName: "招商银行", // 税源地开户行
                authBankNo: "", // 税源地银行账号
                linkFlg: undefined
              }
              this.getTaskList()
            }
          });
        } else {
          return false;
        }
      });
    },
    addTaskMethods1() {
      // 编辑
      this.$http({
        url: "/quick/bank/saveOrUpdate",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: this.taskForm,
      }).then((data) => {
        console.log(data)
        if (data.code == 0) {
          this.$message({
            message: '设置成功',
            type: 'success',
            offset: 60
          })
          this.addTaskModules = false
          this.getTaskList()
          this.taskForm = {
            authBusinessName: "", // 税源地名称
            authBankName: "招商银行", // 税源地开户行
            authBankNo: "", // 税源地银行账号
            linkFlg: undefined
          }
          // this.taskForm.name = data.name
          // this.taskForm.taskPayment = data.taskPayment
        }
      });
    },
    getTaskDetails(id) {
      // 删除
      this.$http({
        url: "/api/quick/bank/saveOrUpdate",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          id: id,
          yn: 0
        },
      }).then((data) => {
        if (data.code == 0) {
          this.getTaskList()
          this.$message({
            message: '操作成功',
            type: 'success',
            offset: 60
          })
        }
      });
    },
    loadfile() {
      window.open(this.mubanUrl)
    },
    taskClose() {
      // 关闭新建项目清除数据
      this.mubanflag = false
      this.mubanArr = []
      this.taskForm = {
        authBusinessName: "", // 税源地名称
        authBankName: "招商银行", // 税源地开户行
        authBankNo: "", // 税源地银行账号
        linkFlg: undefined,
        id:"",
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.el-input--prefix .el-input__inner {
    padding-left: 30px !important;
}

.task-add {
    float: right;
}
.add-task {
  padding-right: 50px;
  & :deep(.el-form-item) {
    .el-date-editor--date {
      .el-input__inner {
        padding: 0 30px;
      }
    }
  }
  & :deep(.el-upload--text) {
    width: auto;
    height: auto;
    border: 0;
    display: block;
    text-align: left;
  }
  & :deep(.el-button--small) {
    color: #326CF0;
    border-color: #326CF0;
  }
}

.details-task {
  .task-content {
    color: #0A2E6A;
  }
  & :deep(.el-form-item) {
    .el-form-item__label,
    .el-form-item__content {
      line-height: 22px;
    }
  }
}
.task-message {
  width: 260px;
  text-align: left;
  .el-button--primary {
    background-color: #326CF0;
    color: #ffffff;
  }
}
.query-plain {
  float: right;
  margin-top: 3px;
}
.el-form-item__content .upload-renyuanbiao {
  float: left;
  margin-left: 0;
  width: auto !important;
}
.cardTits.renwu-error {
  margin-left: 152px;
  margin-bottom: 20px;
  .renwu-title {
    margin-bottom: 10px;
  }
  .el-table {
    th {
      height: 40px;
    }
  }
  .renwu-dwoload {
    color: #326CF0;
    margin-top: 10px;
    font-size: 12px;
    display: inline-block;
    cursor: pointer;
  }
  .renwu-dwoload:hover {
    text-decoration: underline;
  }
}
.task-margin {
  margin-bottom: 100px;
}
</style>
<style lang="scss">
.task-margins {
  .el-select {
    width: 360px;
}
}
.subject-titles .query .query-input .el-input .el-input__inner {
    height: 32px;
    font-size: 12px;
    border-color: #eff4fa;
}
.subject-titles {
  margin: 21px 0 16px 20px;

  // 查询
  .query {
    display: flex;
    align-items: center;
    margin-bottom: 23px;

    .query-input {
      width:260px;
      margin-right: 10px;

      .el-input {
        line-height: 32px;

        .el-input__inner {
          height: 32px;
          font-size: 12px;
          border-color: #EFF4FA;
        }
      }
    }

    .query-select {
      width: 260px;
      margin-right: 10px;

      .el-input {
        line-height: 32px;

        .el-input__inner {
          height: 32px;
          font-size: 12px;
          border-color: #EFF4FA;
        }

        .el-input__icon {
          line-height: 32px;
        }
      }
    }

    .query-btn {
      min-width: 60px;
      padding: 0 10px;
      height: 32px;
      min-height: 32px;
      background-color: #326CF0;
      border-color: #326CF0;
      font-size: 12px;
      font-weight: normal;
    }
  }

  // 表格头部下载
  .download {
    font-size: 12px;

    span {
      color: #326CF0;
      border: 1px solid #326CF0;
      padding: 4px 5px;
      border-radius: 5px;
      background: #FFFFFF !important;
      margin-right: 10px;
      cursor: pointer;
      display: inline-block;
      min-width: 50px;
      text-align: center;
    }
  }

}
.add-tasks {
  .el-textarea__inner {
    height: 100px;
  }
}
.subject-titles123 {
  .el-select {
    width: 260px;
  }
}
.demo-ruleForms .el-upload--picture-card {
    background-color: #fff;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    box-sizing: border-box;
    width: 360px;
    height: 180px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}
.demo-ruleForms .el-upload--picture-card i {
    font-size: 67px;
    color: #C0C4CC;
    margin: 40px 0 16px;
    line-height: 50px;
}
.demo-ruleForms .el-upload--picture-card .el-upload__text {
    margin-top: -20px;
}
.demo-ruleForms .el-upload--picture-card .el-upload__text em {
    font-style: normal;
    color: #409EFF;
}
</style>